<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useTransition } from '@vueuse/core'
import { useUserStore } from '@/stores'
import * as echarts from 'echarts'
// 统计数据
const calendar = ref(new Date())
const userStore = useUserStore()
const activeUsersValue = ref(0)
const tadingNumValue = ref(0)
const todayNewValue = ref(0)
const todayTradeMonnyValue = ref(0)
const activeUsers = useTransition(activeUsersValue, {
  duration: 1500
})
const tadingNum = useTransition(tadingNumValue, {
  duration: 1500
})
const todayNew = useTransition(todayNewValue, {
  duration: 1500
})
const todayTradeMonny = useTransition(todayTradeMonnyValue, {
  duration: 1500
})

// 饼图
const chartRef = ref(null)
// 柱状图和折线图及其数据
const chart = ref(null)
const state = reactive({
  userActiveData: [3434, 3145, 2500, 3214, 3230, 3500, 3000],
  orderData: [345, 123, 222, 462, 87, 700, 630],
  newItemData: [13, 23, 32, 16, 12, 51, 43],
  tradeData: [45, 56, 102, 36, 31, 41, 43]
})
function initChart() {
  const pie = echarts.init(chartRef.value)
  const pieOption = {
    title: {
      text: '用户年龄段分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'right'
    },
    series: [
      {
        name: '用户分布',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 55, name: '0-20岁' },
          { value: 32, name: '20-40岁' },
          { value: 13, name: '40岁以上' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  pie.setOption(pieOption)

  const line = echarts.init(chart.value)
  const lineOption = {
    legend: {
      data: ['用户活跃数', '订单交易量', '今日上新数量', '今日交易额']
    },
    xAxis: [
      {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '用户活跃数',
        min: 0,
        max: 4000,
        interval: 500,
        axisLabel: {
          formatter: '{value}'
        }
      },
      {
        type: 'value',
        name: '柱状图y轴',
        min: 0,
        max: 800,
        interval: 100,
        axisLabel: {
          formatter: '{value}'
        }
      }
    ],
    series: [
      {
        name: '用户活跃数',
        type: 'line',
        data: state.userActiveData
      },
      {
        name: '订单交易量',
        type: 'bar',
        yAxisIndex: 1,
        data: state.orderData
      },
      {
        name: '今日上新数量',
        type: 'bar',
        yAxisIndex: 1,
        data: state.newItemData
      },
      {
        name: '今日交易额',
        type: 'bar',
        yAxisIndex: 1,
        data: state.tradeData
      }
    ]
  }
  line.setOption(lineOption)
}

onMounted(() => {
  initChart()
  activeUsersValue.value = 3500
  tadingNumValue.value = 52
  todayNewValue.value = 30
  todayTradeMonnyValue.value = 20500
})
</script>

<template>
  <div class="dashboard">
    <div class="container">
      <!-- 左侧内容 -->
      <div class="left">
        <!-- <div class="image-container"> -->
        <div style="text-align: center; height: 170px">
          <!-- <img
              src="src/assets/logo.png"
              alt="Your Image"
              style="height: auto; width: 650px"
            /> -->
          <h1 class="logo-text">校园二手车交易平台</h1>
          <p class="logo-text p">CAMPUS-CAR-TRADING</p>
        </div>
        <!-- 图表数据 -->
        <div class="panel">
          <el-row class="statistic-show" justify="center">
            <el-col :span="6">
              <el-statistic
                :value="activeUsers"
                :value-style="{
                  'font-size': '20px',
                  color: '#383c4e',
                  'font-weight': '500',
                  'margin-top': '10px'
                }"
              >
                <template #title>
                  <span class="data">今日活跃用户</span>
                </template>
              </el-statistic>
            </el-col>
            <el-col :span="6">
              <el-statistic
                :value="tadingNum"
                :value-style="{
                  'font-size': '20px',
                  color: '#383c4e',
                  'font-weight': '500',
                  'margin-top': '10px'
                }"
              >
                <template #title>
                  <span class="data">今日交易量</span>
                </template>
              </el-statistic>
            </el-col>
            <el-col :span="6">
              <el-statistic
                :value="todayNew"
                :value-style="{
                  'font-size': '20px',
                  color: '#383c4e',
                  'font-weight': '500',
                  'margin-top': '10px'
                }"
              >
                <template #title>
                  <span class="data">今日上新</span>
                </template>
              </el-statistic>
            </el-col>
            <el-col :span="6">
              <el-statistic
                :value="todayTradeMonny"
                :value-style="{
                  'font-size': '20px',
                  color: '#383c4e',
                  'font-weight': '500',
                  'margin-top': '10px'
                }"
              >
                <template #title>
                  <span class="data">今日交易额</span>
                </template>
              </el-statistic>
            </el-col>
          </el-row>
          <!-- 图表 -->
          <div class="lineChart-erea">
            <div ref="chart" style="width: 100%; height: 100%"></div>
          </div>
        </div>
      </div>
      <!-- 右侧内容 -->
      <div class="right">
        <div class="panel">
          <!-- 个人信息 -->
          <div class="user-info">
            <img
              v-if="userStore.userInfo.avatar"
              class="avatar"
              :src="userStore.userInfo.avatar"
              alt=""
            />
            <span v-else class="username">{{
              userStore.userInfo.name?.charAt(0)
            }}</span>
            <div class="company-info">
              <div class="title">
                校园二手车交易平台
                <span>体验版</span>
              </div>
              <div class="depart">陈同学 ｜ 系统管理员</div>
            </div>
          </div>
        </div>
        <div class="panel pie">
          <!-- 图表 -->
          <div ref="chartRef" style="width: 85%; height: 225px"></div>
        </div>
        <!-- 帮助链接 -->
        <div class="panel">
          <h3>日历</h3>
          <el-calendar v-model="calendar" />
        </div>

        <!-- 通知公告 -->
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.logo-text {
  font-size: 60px;
  font-family: 'Microsoft YaHei';
  line-height: 1;
  letter-spacing: 5px;
  color: #79bbfff0;
  text-align: center;
  text-shadow: 1px -1px #fff, -1px -1px #999, -10px 10px 10px #80808080;

  &.p {
    margin-top: 20px;
    font-size: 45px;
  }
}

.lineChart-erea {
  margin-top: 30px;
  width: 100%;
  height: 340px;
}
.statistic-show {
  background-color: #f5f6f8;
  border-radius: 5px;
  padding: 20px 0px 10px 60px;

  .data {
    font-size: 16px;
  }
}
.image-container {
  position: relative;
  display: block;

  img {
    display: block;
    width: 70%;
    height: auto;
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #182c61; /* 替换为你想要的颜色 */
    mix-blend-mode: screen;
  }
}

.dashboard {
  background: #f5f6f8;
  width: 100%;
  min-height: calc(100vh - 80px);

  ::v-deep .el-calendar-day {
    height: 40px;
  }
  ::v-deep .el-calendar-table__row td,
  ::v-deep .el-calendar-table tr td:first-child,
  ::v-deep .el-calendar-table__row td.prev {
    border: none;
  }

  .date-content {
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
  }
  .date-content .rest {
    color: #fff;
    border-radius: 50%;
    background: rgb(250, 124, 77);
    width: 20px;
    height: 20px;
    line-height: 20px;
    display: inline-block;
    font-size: 12px;
    margin-left: 10px;
  }
  .date-content .text {
    width: 20px;
    height: 20px;
    line-height: 20px;
    display: inline-block;
  }
  ::v-deep .el-calendar-table td.is-selected .text {
    background: #409eff;
    color: #fff;
    border-radius: 50%;
  }
  ::v-deep .el-calendar__header {
    display: none;
  }
  .container {
    display: flex;
    .right {
      width: 40%;
      .panel {
        margin-left: 8px;
      }
      :nth-child(1) {
        margin-top: 0;
      }
    }
    .left {
      flex: 1;
      :nth-child(1) {
        margin-top: 0;
      }
    }
    .panel {
      background-color: #fff;

      margin-top: 8px;
      padding: 20px;
      &.pie {
        padding: 10px 20px 0;
      }
      .panel-title {
        font-size: 16px;
        color: #383c4e;
        font-weight: 500;
      }
      // 用户信息样式
      .user-info {
        display: flex;
        .avatar {
          width: 48px;
          height: 48px;
          border-radius: 12px;
          background-color: #d9d9d9;
          line-height: 48px;
          text-align: center;
        }
        .username {
          width: 30px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          border-radius: 50%;
          background: #04c9be;
          color: #fff;
          margin-right: 4px;
        }
        .company-info {
          margin-left: 10px;
          height: 48px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .title {
            color: #383c4e;
            font-weight: 500;
            font-size: 16px;
            font-family: PingFang SC, PingFang SC-Medium;
            span {
              font-size: 12px;
              background: #f5f6f8;
              text-align: center;
              padding: 2px 8px;
              border-radius: 2px;
              color: #697086;
            }
          }
          .depart {
            font-size: 14px;
            color: #697086;
            font-weight: 400;
          }
        }
      }
      // 代办样式
      .todo-list {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        .todo-item {
          width: 18%;
          height: 90px;
          display: flex;
          flex-direction: column;
          padding: 10px;
          justify-content: space-around;
          :nth-child(1) {
            color: #697086;
            font-size: 14px;
          }
          :nth-child(2) {
            color: #383c4e;
            font-size: 30px;
            font-weight: 500;
          }
        }
      }
      // 快捷入口
      .quick-entry {
        margin-top: 16px;
        display: flex;
        .entry-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-left: 60px;
          &:nth-child(1) {
            margin-left: 0px;
          }
          .entry-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: #f5f6f8;
            background-size: cover;
            &.approval {
              background-image: url('~@/assets/common/approval.png');
            }
            &.social {
              background-image: url('~@/assets/common/social.png');
            }
            &.salary {
              background-image: url('~@/assets/common/salary.png');
            }
            &.role {
              background-image: url('~@/assets/common/role.png');
            }
            &.bpm {
              background-image: url('~@/assets/common/bpm.png');
            }
          }
          span {
            color: #697086;
            font-size: 14px;
            margin-top: 8px;
          }
        }
      }
      // 图表数据
      .chart-container {
        display: flex;
        .chart-info {
          width: 240px;
          margin-top: 10px;
          .info-main {
            padding: 10px;
            display: flex;
            flex-direction: column;
            :nth-child(1) {
              font-size: 14px;
              color: #697086;
            }
            :nth-child(2) {
              margin-top: 10px;
              font-size: 30px;
              color: #04c9be;
              font-weight: 500;
            }
          }
          .info-list {
            background: #f5f6f8;
            border-radius: 4px;
            padding: 12px 15px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            .info-list-item {
              width: 50%;
              margin-top: 10px;
              display: flex;
              flex-direction: column;

              :nth-child(1) {
                font-size: 14px;
                color: #697086;
              }
              :nth-child(2) {
                margin-top: 10px;
                font-size: 30px;
                color: #383c4e;
                font-weight: 500;
              }
            }
          }
        }
        .chart {
          flex: 1;
        }
      }
    }
  }
}
</style>
